<!DOCTYPE html>
<html>
  <head>
    <title>Vue事件处理基础</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      button {
        margin: 0 10px;
        padding: 8px 16px;
        font-size: 14px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>计数器：{{ count }}</h2>
      <button v-on:click="increment">增加</button>
      <button @click="decrement">减少</button>
      <button @click="reset">重置</button>
    </div>

    <script>
      const { createApp, ref } = Vue;

      createApp({
        setup() {
          const count = ref(0);

          const increment = () => {
            count.value++;
          };

          const decrement = () => {
            count.value--;
          };

          const reset = () => {
            count.value = 0;
          };

          return {
            count,
            increment,
            decrement,
            reset,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
